<template>
    <div class="form-group">
        <div class="input-group w-100d">
            <span class="input-group-addon v"><i class="fa f-s-20" :class="icon"></i></span>
            <input :type="type" class="form-control" :placeholder="placeholder" :id="id" :required="required" title="" :value="value">
        </div>
        <p class="text-danger text-right h6">{{errorMessage}}</p>
    </div>
</template>

<style scoped="">
    .v {
        width: 54px !important;
    }
</style>

<script>
    export default {
    	name: 'IconInput',
        props: {
            icon: {type: String, default: 'fa fa-edit'},
            type: {type: String, default: 'text'},
            placeholder: {type: String},
            id: {type: String},
            required: {type: String},
            errorMessage: {type: String},
            value: {type: String}
        }
    };
</script>
